<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[{name: 'box-base',title: '基础信息'},{name: 'box-contact',title: '联系信息'},{name: 'box-map',title: '对照关系'}]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm
        :data="form"
        :rules="propRules"
        ref="editForm"
        :disabled="propReadonly"
      >
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem
            label="机构名称"
            name="name"
            :parent="_self"
            :form="form"
            @change="changeName"
          />
          <customFormItem
            label="机构类型"
            name="type"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.selectStatic.name"
            :config="{key: 'value', label: 'label', value: 'value', options: constCommon.busConst.officeType, clearable: false}"
          />
          <customFormItem
            label="上级机构"
            name="parentName"
            :parent="_self"
            :form="form"
            :disabled="true"
          />
          <customFormItem
            label="系统编码"
            name="systemCode"
            :parent="_self"
            :form="form"
            :disabled="true"
          />

          <customFormItem
            label="机构简称"
            name="shortname"
            :parent="_self"
            :form="form"
          />
          <customFormItem
            label="拼音"
            name="spelling"
            :parent="_self"
            :form="form"
          />
          <customFormItem
            label="备注"
            name="remark"
            :parent="_self"
            :form="form"
          />

          <div id="box-contact" class="box-title">联系信息</div>
          <customFormItem
            label="负责人"
            name="manager"
            :parent="_self"
            :form="form"
          />
          <customFormItem
            label="联系方式"
            name="contact"
            :parent="_self"
            :form="form"
          />
          <customFormItem
            label="联系邮件"
            name="email"
            :parent="_self"
            :form="form"
          />

          <div id="box-map" class="box-title">对照关系</div>
          <customFormItem
            label="内部编码"
            name="innerCode"
            :parent="_self"
            :form="form"
          />
          <customFormItem
            label="HRP编码"
            name="hrpCode"
            :parent="_self"
            :form="form"
          />
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {}
    }
  },
  created() {
    console.log('_self', this)
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.viewData = this.propCurrentRow
        // 新增时需要填写父级机构的id和名称
        if (!this.form.id) {
          if (initData) {
            this.form.parentId = initData.id
            this.form.parentName = initData.label
          }
          this.$set(this.form, 'type', 0)
          this.$set(this.form, 'systemCode', '自动生成')
        } else {
          let wrapper = this.$newWrapper().eq('office_id', this.form.id)
        }
        this.$set(this.form, 'id', this.form.id)
      },
      afterSave: () => {},
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
    })
  },
  props: [
    'propPrimaryKey',
    'propDictionaries',
    'propCurrentRow',
    'propViewFormData',
    'propReadonly',
    'propStatus',
    'propRules',
    'propInitData',
  ],
  components: {customAnchor},
  computed: {},
  methods: {
    changeName() {
      this.form.spelling = this.pyutils.getAllFirstLetter(this.form.name)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
